<template>
    <Modal :visible.sync="visible" title="打印" :ok="onConfirmPrint">
        <div id="print-order" v-if="order">
            <div
                style="width: 260px; padding:20px 0; box-sizing: border-box; background: white; font-family: '思源黑体';"
            >
                <div style="width:100%;color: #231916; ">
                    <div
                        style="font-size: 40px; font-weight: bold; text-align: center; position: relative; padding: 10px 0;"
                    >
                        <div
                            style="width: 120px; height: 4px; background: #231916; position: absolute; right: 0; margin-right: 6px;"
                        ></div>
                        PRIMECAKE
                        <div style="width: 120px; height: 4px; margin-left: 6px; background: #231916;"></div>
                    </div>
                    <div
                        style="width: 100%; position: relative;font-size: 16px; font-weight: bold;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 16px;"
                    >
                        <img :src="dateImg" style="width: 80%;height: 60px;" />
                        <div style="margin-top: -50px;">
                            <div style="text-align: center;">
                                {{ moment(order.address.delivery_start_time).format('MM月DD日') }}
                            </div>
                            <div>
                                {{ moment(order.address.delivery_start_time).format('HH:mm') }}-{{
                                    moment(order.address.delivery_end_time).format('HH:mm')
                                }}
                            </div>
                        </div>
                    </div>
                    <div style="margin-top:26px; padding: 0 4px;font-weight: bold; font-size: 14px;">
                        下单时间：{{ order.created }}
                    </div>
                    <div v-for="(goods, index) in order.goods" :key="index">
                        <div
                            style="font-size: 16pt;padding: 0 4px; background: #231916; color: white; font-weight:bold;margin-top: 10px; "
                        >
                            {{ goods.title }}
                        </div>
                        <div style="margin-top:10px; padding: 0 4px; font-size: 16px;font-weight: bold;">
                            <div style="display: flex; justify-content: space-between;">
                                <div style="flex: 1">数量</div>
                                <div style="flex: 1">单价</div>
                                <div>实付</div>
                            </div>
                            <div style="display: flex; justify-content: space-between;">
                                <div style="flex: 1;">{{ goods.num }}</div>
                                <div style="flex: 1">{{ goods.price }}</div>
                                <div>{{ goods.payment }}</div>
                            </div>
                        </div>
                    </div>
                    <div
                        style="margin-top:10px; padding: 0 4px; background: #231916; color: white; font-size: 16pt; font-weight: bold; "
                    >
                        字牌：{{
                            order.goods
                                .filter(
                                    goods =>
                                        !(
                                            goods.buyer_messages == '' ||
                                            goods.buyer_messages == 'Array' ||
                                            goods.buyer_messages == '[]'
                                        )
                                )
                                .map(goods => goods.buyer_messages)
                        }}
                    </div>
                    <div style="margin-top:10px; font-size: 14px;font-weight: bold;">
                        <div style="margin-top:10px">收货人：{{ order.address.receiver_name }}</div>
                        <div style="margin-top:10px">电话：{{ order.address.receiver_tel }}</div>
                        <div style="margin-top:10px">收货地址：{{ order.address.delivery_address }}</div>
                    </div>
                    <div style="border-bottom: 1px dotted #231916; margin-top: 6px;"></div>
                    <div style="margin-top: 10px; font-size: 14px;font-weight: bold;">配送中心地址：{{ address }}</div>

                    <div
                        style="margin-top:10px;display: flex;justify-content: space-between; font-size: 12px; font-weight: bold;"
                    >
                        <div style="display: flex; flex-direction: column; justify-content: space-between;">
                            <div>
                                客服电话：4006789262
                            </div>
                            <div>
                                <img :src="rightImg" style="width: 40px; height: 10px;" />
                                <div>
                                    售后问题请扫码咨询客服
                                </div>
                            </div>
                        </div>
                        <img :src="code" style="width:80pt;height:80pt;" />
                    </div>
                </div>
            </div>
        </div>
    </Modal>
</template>

<script>
import { findAddressList } from '@/api/address'
import code from '@/assets/images/code.png'
import dateImg from '@/assets/images/date_border.png'
import rightImg from '@/assets/images/right.png'
import { getLodop } from '@/utils/LodopFuncs'
import moment from 'moment'
export default {
    name: 'PrintOrder',
    data() {
        return {
            url: '',
            moment: moment,
            visible: false,
            order: null,
            list: [],
            code,
            dateImg,
            rightImg
        }
    },
    created() {
        this.findAddressList()
    },
    async mounted() {},
    computed: {
        address() {
            if (!this.order) return ''

            // console.log(this.list)

            const [address] = this.list.filter(items => items.node_kdt_id === this.order.node_kdt_id)

            if (!address) return ''

            return address.address
        }
    },
    methods: {
        async findAddressList() {
            const res = await findAddressList()
            const {
                data: { data }
            } = res
            this.list = data
        },
        show(order) {
            this.order = order
            this.visible = true
        },
        printOrder() {
            const innerHtml = `            
            <!DOCTYPE html>
            <html lang="zh-cmn-Hans">
                <body>
                    ${document.getElementById('print-order').innerHTML}
                </body>
            </html>`
            const node = document.getElementById('print-order')

            const width = node.scrollWidth

            const height = node.scrollHeight

            console.log(width, height)

            const lodop = getLodop()

            console.log(lodop, '===========lodop')

            lodop.PRINT_INIT('订单打印')

            const strResult = lodop.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Deli DL-825T')

            console.log(strResult)
            // lodop.SET_PRINT_STYLEA(0, 'Horient', 2)

            // lodop.SET_PRINT_STYLEA(0, 'Vorient', 2)

            // lodop.SET_PRINT_STYLEA(0, 'ScalX', 1.5)

            lodop.ADD_PRINT_HTM(0, 2, '100%', 2, innerHtml)
            // lodop.ADD_PRINT_IMAGE(0, 0, '100%', 10, innerHtml)

            lodop.SET_PRINT_STYLEA(0, 'Stretch', 2)

            lodop.SET_PRINT_STYLEA(3, 'FontName', '思源黑体旧字形 Bold')

            lodop.SET_PRINT_PAGESIZE(3, 560, 10, '')

            lodop.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Width:76%')

            lodop.PRINT()

            // lodop.PREVIEW()
        },
        async onConfirmPrint() {
            this.printOrder()
        }
    }
}
</script>

<style lang="less"></style>
